<template>
	<view class="contain" style="background:#ffffff"  :style="{ 'padding-top': top + 'px' }">




	<!-- 	<swiper class="wrap-swiper" :current="active" @change="changeSwiper" :indicator-dots="false" :autoplay="false" :interval="1000" :duration="500">
			<swiper-item v-for="(item,parent) in navs"> -->
				<scroll-view @scrolltolower="loadList" scroll-y="true" style="height: 100%;">
					<!-- <view class="swiper-item padding-12" :style="style['index_background'] | bgimg(700)+''"> -->
					<view class="swiper-item padding-12" >

						<view v-if="!isStyle('search')"  ></view>
						<!-- <block v-if="parent == 0" > -->
							<block  v-for="(style,styleIndex) in styleList">

							<swiper v-if="style.moduleKey == 'carousel'"  class="wrap-banner margin-b12  b-radius-5" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
								<swiper-item v-for="img in style.moduleData.list">
									<view @click="cGo(img)" class="bg-img h100 b-radius-12 "     :style="img.img | bgimg(700)+''"></view>
								</swiper-item>
							</swiper>
							<!-- 左一右二 -->
							<view v-if="style.moduleKey == 'leftOneRightTwo'" class="bg-color-w b-radius-5 padding-10  margin-b12">

										<view class="flex-row ads3">
											  <image v-if="idx <1 " v-for="(item,idx) in style.moduleData.list"    mode="widthFix"   class="image" :src="item.img"
											  />
											  <view class="flex-col items-center group_2 ads3-left">
												<image v-if="idx <=1 " v-for="(item,idx) in style.moduleData.list"  mode="widthFix"   class="image" :src="item.img" />
											  </view>

										</view>
							</view>
							<!-- 左二右一 -->

						     <view v-if="style.moduleKey == 'leftTwoRightOne'" class="bg-color-w b-radius-5   margin-b12" >
									<view class="flex-row ads3">
										  <view class="flex-col items-center group_2 ads3-left">
											<image v-if="idx <2 " v-for="(item,idx) in style.moduleData.list"  mode="widthFix"   :src="item.img" class="image_2" />
										  </view>
										  <image v-if="idx >=2 " v-for="(item,idx) in style.moduleData.list"   mode="widthFix"   class="image" :src="item.img"
										  />
									</view>


							</view>


							<!-- 三列单行 -->
							<view v-if="style.moduleKey == 'flexThree'" class="bg-color-w b-radius-5 padding-10 grid grid-c-3 grid-g10 margin-b12">
								<image @click="cGo(item)" class="w100" v-for="item in style.moduleData.list" :src="item.img | img(400)+''" mode="widthFix"></image>
							</view>
							<!-- 四列单行 -->
							<view v-if="style.moduleKey == 'flexFour'" class="bg-color-w b-radius-5 padding-10 grid grid-c-4 grid-g10 margin-b12">
								<image @click="cGo(item)" class="w100" v-for="item in style.moduleData.list" :src="item.img | img(400)+''" mode="widthFix"></image>
							</view>
							<!-- 五列单行 -->
							<view v-if="style.moduleKey == 'flexFive'" class="bg-color-w b-radius-5 padding-10 grid grid-c-5 grid-g10 margin-b12">
								<image @click="cGo(item)" class="w100" v-for="item in style.moduleData.list" :src="item.img | img(400)+''" mode="widthFix"></image>
							</view>
							<!-- 一张大图 -->
							<view v-if="style.moduleKey == 'flexOne'" class=" b-radius-5  margin-b12">
								<image @click="cGo(item)" class="w100" v-for="item in style.moduleData.list" :src="item.img | img(700)+''" mode="widthFix"></image>
							</view>
							<!-- 二张大图 -->
							<view v-if="style.moduleKey == 'flexTwo'" class=" b-radius-5 over-h bg-color-w  grid grid-c-2 grid-g10  margin-b12">
								<image  @click="cGo(item)" class="w100" v-for="item in style.moduleData.list" :src="item.img | img(700)+''" mode="widthFix"></image>
							</view>
							<!-- 上一下二 -->
							<view v-if="style.moduleKey == 'topOneBottomTwo'" class=" b-radius-5 over-h bg-color-w margin-b12">
								<image  @click="cGo(item)" class="w100 " v-if="idx <= 0" v-for="(item,idx) in style.moduleData.list" :src="item.img | img(700)+''" mode="widthFix"></image>
								<view class="grid grid-c-2 grid-g10">
									<image  @click="cGo(item)" class="w100" v-if="idx > 0" v-for="(item,idx) in style.moduleData.list" :src="item.img | img(500)+''" mode="widthFix"></image>
								</view>
							</view>
							<!-- 上二下一 -->
							<view v-if="style.moduleKey == 'topTwoBottomOne'" class=" b-radius-5 over-h bg-color-w margin-b12">
								<view class="grid grid-c-2 grid-g10 margin-b10">
									<image @click="cGo(item)" class="w100" v-if="idx <= 1" v-for="(item,idx) in style.moduleData.list" :src="item.img | img(500)+''" mode="widthFix"></image>
								</view>
								<image @click="cGo(item)" class="w100 " v-if="idx > 1" v-for="(item,idx) in style.moduleData.list" :src="item.img | img(700)+''" mode="widthFix"></image>
							</view>
							<!-- 文字图片 -->
							<view  v-if="style.moduleKey == 'textPicture'" class="grid grid-c-4 grid-g10 b-radius-10 bg-color-w wrap-tuijian padding-10 margin-b12">
								<view @click="cGo(item)" v-for="(item,idx) in style.moduleData.list" class="flex f-c f-a-c">
									<text class="t-color-y f15-size f-w-500">{{item.title}}</text>
									<view class="bg-img margin-t10 b-radius-5" style="padding: 50%;" :style="item.img | bgimg(400)+''"></view>
								</view>
							</view>
							<!-- 宫格导航 -->
							<view v-if="style.moduleKey == 'menu'" class="grid grid-c-4  b-radius-10 padding-tb10 margin-b12">
							<!-- <view v-if="style.moduleKey == 'menu'" class="grid grid-c-5  b-radius-10 padding-tb10 margin-b12"> -->
								<view @click="cGo(item)" v-for="(item,idx) in style.moduleData.list" class="">
									<view class="h-80 flex f-a-c f-j-c"  >
										<image class="w-55 " style="border-radius: 25px;" :src="item.img | img(400)+''" mode="widthFix"></image>
									</view>
									<text class="f12-size t-color-9  flex f-a-c f-j-c">{{item.title}}</text>
								</view>
							</view>
							<!-- 服务 -->
							<view v-if="style.moduleKey == 'service'" class="bg-color-w   b-radius-10 padding-tb10 margin-b12">

								 <serviceCateslist class="margin-t12" showType="2" :isSpread="active == 0 ? true : false"></serviceCateslist>

							</view>




							<!-- 拼团 -->
							<view v-if="style.moduleKey == 'group'" v-for="(item,idx) in style.moduleData.list" class="b-radius-10 bg-color-w wrap-pintuan margin-b12 over-h">
								<view   @click="go('/pages/search/list?type=3')" v-for="goods in item.titleWay" class="flex padding-lr12 h-40 f-a-c f-j-s">
									<view class="flex f-a-c">
										<text class="f-w-b margin-r8" style="color: rgb(173, 78, 0);">{{goods.title}}</text>
										<text class="f10-size" style="color: rgb(199, 90, 0);">{{goods.desc}}</text>
									</view>
									<view class="flex f-a-c">
										<text class="f12-size t-color-9 margin-r2">{{i18nHot['更多']}}</text>
										<text class="flex f-a-c van-icon van-icon-arrow t-color-9"></text>
									</view>
								</view>
								<view class="flex padding-lr12 ">
									<view @click="go('/pages/goods/detail?id='+goods.id)" v-for="goods in item.listWay" class="flex  f-s-0 margin-r12 f-c pintuan-item">
										<view :style="goods.mainImg | bgimg(300)+''" class="h-100 bg-img b-radius-8"></view>
										<view class="f12-size line1 margin-t4">{{goods.title}}</view>
										<view class="flex f-a-c f-j-s margin-t4">
											<view class="text-price f16-size t-color-y">{{goods.price}}</view>
											<view class="bg-color-linear-y h-16 t-color-w f10-size padding-lr5 b-radius-30">{{i18nHot['拼']}}</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 秒杀活动 -->
							<view v-if="style.moduleKey == 'seckill'" v-for="(item,idx) in style.moduleData.list" class="b-radius-10 bg-color-w wrap-tuijian margin-b12 over-h">
								<view @click="go('/pages/search/list?type=2')" v-for="goods in item.titleWay" class="flex padding-lr12 h-40 f-a-c f-j-s">
									<view class="flex f-a-c">
										<text class="f-w-b margin-r8" style="color: rgb(173, 78, 0);">{{goods.title}}</text>
										<text class="f10-size" style="color: rgb(199, 90, 0);">{{goods.desc}}</text>
									</view>
									<view class="flex f-a-c">
										<text class="f12-size t-color-9 margin-r2">{{i18nHot['更多']}}</text>
										<text class="flex f-a-c van-icon van-icon-arrow t-color-9"></text>
									</view>
								</view>
								<view class="flex padding-lr12 ">
									<view @click="go('/pages/goods/detail?id='+goods.id)" v-for="goods in item.listWay" class="flex  f-s-0 margin-r12 f-c pintuan-item">
										<view :style="goods.mainImg | bgimg(300)+''" class="h-100 bg-img b-radius-8"></view>
										<view class="f12-size line1 margin-t4">{{goods.title}}</view>
										<view class="flex f-a-c f-j-s margin-t4">
											<view class="text-price f16-size t-color-y">{{goods.price}}</view>
											<view class="bg-color-linear-y h-16 t-color-w f10-size padding-lr5 b-radius-30">{{i18nHot['秒']}}</view>
										</view>
									</view>
								</view>
							</view>

						<!-- 附近商家 -->
						<view v-if="style.moduleKey == 'shops'" v-for="(list,index) in style.moduleData.list" class="margin-b4">


						 <shopsList class="margin-t12"  showType="2" :isSpread="active == 0 ? true : false"></shopsList>


						</view>


						<!-- 优惠券 -->
						<view v-if="style.moduleKey == 'coupon'" v-for="(list,index) in style.moduleData.list" class="margin-b4">

						 <coupon class="margin-t12"  showType="2" :isSpread="active == 0 ? true : false"></coupon>

						</view>
							<!-- 商品分类 -->
							<view v-if="style.moduleKey == 'goods'" v-for="(list,index) in style.moduleData.list" class="margin-b4">
								<view class="grid grid-c-4 h-40 margin-b10">
									<view @click="chooseStyleCate(styleIndex,index,idx)" v-for="(title,idx) in list['titleWay']" class="flex f-s-0 f-c f-a-c f-j-c h100 ">
										<text :class="list['cateIndex']==idx ? 't-color-y f18-size' : 'f15-size'" class=" flex f-a-c h-24 f-w-500">{{title.title}}</text>
										<text class="f11-size t-color-9">{{title.desc}}</text>
									</view>
								</view>
								<styleGoods class="" :offset="1.2" :cateIndex="list['cateIndex']" :list="list['listWay']"></styleGoods>
							</view>
							<!-- 标题栏 -->
							<view  @click="cGo(list)" v-if="style.moduleKey == 'title'" v-for="(list,index) in style.moduleData.list" :style="{'background-color': list.bk_color}" class=" margin-b12 flex f-a-c f-j-s ">
								<text v-if="list.textAlign != 'left'" class="f11-size padding-10"></text>
								<text class="f16-size"  :style="{'color': list.color}">{{list.title}}</text>
								<text class="f11-size" :style="{'color': list.color1}">{{list.title1}}</text>
							</view>
							<!-- 公告 -->
							<view   @click="cGo(list)"  v-if="style.moduleKey == 'notice'" v-for="(list,index) in style.moduleData.list" :style="{'background-color': list.bk_color}" class="flex h-40 b-radius-5 margin-b12">
								<view class="flex f-a-c f-s-0 f-j-c padding-lr12">
									<image class="w-20 " :src="list.img | img(300)+''" mode="widthFix"></image>
								</view>
								<view class="flex flex-1">
									<swiper   class="w100 h100" :circular="true" :vertical="true" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
										<swiper-item v-for="title in list.title" class="padding-lr10 flex f-a-c">
											<view class="line1" :style="{'color': list.color}">{{title.context}}</view>
										</swiper-item>
									</swiper>
								</view>
							</view>
						    </block>
						<!--</block>
						<block v-else>
							<view v-if="item.children && item.children.length > 0 " class="bg-color-w b-radius-10 flex f-w margin-t12 wrap-sub-cate">
								<view @click="go('/pages/search/list?cateTid='+child.id+'&cateName='+child.name)" v-for="(child,idx) in item.children" class="flex f-s-0 sub-item f-c f-a-c f-j-c margin-t8">
									<view v-if="child.img" class="flex w-50 h-50 bg-img  b-radius-5" :style="child.img | bgimg(300)+''"></view>
									<view v-else class="flex w-50 h-50 bg-img  b-radius-5 f-a-c f-j-c shops-icon shops-icon-cate f44-size"></view>
									<view class="f12-size t-color-6 margin-t4">{{child.name}}</view>
								</view>
							</view>
							<view class="padding-6"></view>
							<groupList class="" v-if="active == parent" :catePid="item.id"  :isSpread="active == 0 ? true : false"></groupList>
							<view class="flex f-a-c f-j-c f-w-b t-color-8 padding-tb6 wrap-tuijian-title margin-t12">
								<image class="w-20 margin-r8" src="https://qiniu.ccchongya.com/zan-on.png" mode="widthFix"></image>
								<text>{{i18n['好物分享']}}</text>
							</view>
							<goodsShopList class="margin-t12" v-if="active == parent" showType="2"  :catePid="item.id" :isSpread="active == 0 ? true : false"></goodsShopList>
						</block> -->
						<view v-if="isIphonex" class="padding-20"></view>
						<view  class="padding-30"></view>
						<view v-if="!isLogin" class="padding-20"></view>
					</view>
				</scroll-view>
		<!-- 	</swiper-item>
		</swiper> -->
		<notice></notice>
		<!-- <tab-bar ref="tabbar" :showLogin="!isLogin" :active="0" :isShow="false"></tab-bar> -->
	</view>
</template>
<style scoped lang="scss">
@import url('../../static/css/iconcolor.css');
@import url('@/static/css/index/index.css');
</style>
<script>
	import groupList from '@/components/shops/components/groupgoods.vue';
	import goodsList from '@/components/shops/components/goodslist.vue';

	import serviceCateslist from '@/components/shops/components/serviceCateslist.vue';
	import shopsList from '@/components/shops/components/shopslist.vue';
	// import citySelect from '@/components/linzq-citySelect/linzq-citySelect.vue';
	// import popupLayer from '@/components/popup-layer/popup-layer.vue';
	import getlocation from '@/components/getlocation/index.vue';
		import coupon from './components/coupon/index.vue';
	import styleGoods from '@/components/stylegoods.vue';
	const API = require('@/utils/api/common.js').default;
	const $ = require('@/utils/api.js');
	let self = this;
	export default {
		data() {
			return {
				statusBarHeight: this.statusBarHeight, //状态栏高度，在main.js里
				region: '请选择...', //地区
				top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
				isIphonex: uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
	            isLogin: this.$mStore.getters.isLogin,
				active: 0,
				navs: [],
				pageSize: 20,
				banner: [],
				styleList: [],
				style: '',
				type:0,
				shoptotalPage :0,
				shoplist: [],
				
			};
		},
		onLoad: function() {
			self = this;
			this.init();
			uni.hideTabBar();




		},

		onShow() {
			this.$nextTick(() => {
				if(this.$refs.tabbar) {
					this.$refs.tabbar.getChatLen();
				}
			})
		},
		methods: {
			// oncity() {
			// 		var that = this
			// 		this.$refs.popupRef.show();
			// 	},
			// back_city(e) {
			// 	if (e !== 'no') {
			// 		this.region = e.cityName
			// 		this.$refs.popupRef.close();
			// 	} else {
			// 		this.$refs.popupRef.close();
			// 	}
			// },


			isStyle(type) {
				let arr = [];
				arr = this.styleList.filter((ele) => {
					return ele.moduleKey == type
				})
				return arr.length > 0 ? true : false
			},
			chooseStyleCate(parent,index,idx) {
				this.styleList[parent]['moduleData']['list'][index]['cateIndex'] = idx;
			},
			getShopList() {
				$.ajax({
					// url: API.shopListWithShopCate,
						url: "common/shop/getShopWithCateListByCateId",
				data: {
					// shopId: self.shopId,
					// catePid: self.shopId != '' ? '' : self.catePid,
					// cateTid: self.shopId != '' ? '' : self.cateTid,
					// cateId: self.shopId != '' ? '' : self.cateId,
					// shopCatePid: self.shopId != '' ? self.catePid : '',
					// shopCateTid: self.shopId != '' ? self.cateTid : '',
					// shopCateId: self.shopId != '' ? self.cateId : '',
					// title: self.title,
					// type: self.type,//1普通商品>>2秒杀商品>>3拼团商品
					sort: self.sort,
					status: '',
					// minAmount: self.min,
					// maxAmount: self.max,
					// provinceCode: self.province,
					page: self.page,
					pageSize: self.pageSize,
					spreadStatus: self.spread != '' ? '1' : '',
					longitude: uni.getStorageSync('longitude'),
					latitude: uni.getStorageSync('latitude')
				},
					method: 'GET',
					success(res) {
						let list = [];
						if (self.page != 1) {
							list = self.shoplist.concat(res.data.list);
						} else {
							list = res.data.list ? res.data.list : [];
						}
						self.shoptotalPage = res.data.totalPage;
						self.shoplist  = list;
					}
				})
			},
			getGoodsList() {
				let cate = self.navs[self.active];
				if(cate.list && cate.list.length > 0) {
					return
				}
				cate.page = cate.page ? cate.page : 1;
				cate.totalPage = cate.totalPage ? cate.totalPage : 1;
				$.ajax({
					url: 'common/goods/search',
					data: {
						catePid: cate.id,
						page: cate.page,
						pageSize: self.pageSize,
					},
					method: 'GET',
					success(res) {
						let list = cate.list  ? cate.list : [];
						if (cate.page != 1) {
							cate.list  = list.concat(res.data.list);
						} else {
							cate.list  = res.data.list ? res.data.list : [];
						}
						self.$set(self.navs,self.active,cate);
					}
				})
			},



			async getCate() {

				if(self.style['index_show_hide_category'] != '1') {
					self.navs = [{
							id: '',
							name: self.i18n['推荐']
						}]
					return;
				}


				console.log("11111111");
				await this.$http
					.get('common/goodsCate/getList', {})
					.then(async res => {
						 		console.log("res",res);

								res.data.unshift({
									id: '',
									name: self.i18n['推荐']
								})
								self.navs = res.data;
								console.log(self.navs)

					})
					.catch((e) => {
						console.log(e);
						console.log("eeeeeeeeeeeeeeeeeeee");
					});
				// $.ajax({
				// 	url: 'common/goodsCate/getList',
				// 	data: {},
				// 	method: 'GET',
				// 	success(res) {
				// 		res.data.unshift({
				// 			id: '',
				// 			name: self.i18n['推荐']
				// 		})
				// 		self.navs = res.data;
				// 	}
				// })
			},
			changeSwiper(e) {
				self.active = e.detail.current;
				// self.getGoodsList();
			},
			loadList(e) {
				// let cate = self.navs[self.active];
				// if(cate.page < cate.totalPage) {
				// 	cate.page +=1;
				// 	self.getGoodsList();
				// }
			},
			getIndexStyle() {
				$.ajax({
					url: API.styleByTemplateId,
					// url: API.indexStyle,
					data: {templateId:5},
					method: 'GET',
					success(res) {
						let arr = res.data ? res.data : [];
						if(arr.length > 0) {
							arr.forEach((ele,index) => {
								ele.moduleData = JSON.parse(ele.moduleData);
								if(ele.moduleKey == 'goods') {//商品分类
									ele.moduleData.list.forEach((ele1,idx1) => {
										ele1['cateIndex'] = 0;
									})
								}
								self.styleList.push(ele);
							})
						}
					}
				})
			},
			init() {
				this.getIndexStyle();
				this.getStyle().then((res) => {
					self.style= res;
				    self.getCate();
				})
				// this.getBanner({
				// 	success(res) {
				// 		self.banner = res.data ? res.data : [];
				// 	}
				// })
				// this.getShopList();
			},
		},
		computed: {
			i18n() {
				return this.$t('index')
			},
			i18nHot() {
				return this.$t('hotGroup')
			},
		},
		created() {
		},
		destroyed() {},
		components: {
			coupon,
			getlocation,
			// citySelect,
			// popupLayer,
			serviceCateslist,
			shopsList,
			groupList,goodsList,styleGoods,
		},
		onPullDownRefresh() {
		},
		onReachBottom() {

		}
	}
</script>
